<template>
	<view class="detail">
		<view class="header">
			<image class="header-image" :src="info.image" mode=""></image>
		</view>

		<view class="name-num">
			<view class="name">
				<text>{{ info.name }}</text>
			</view>
			<view class="stock">
				<text>库存{{ info.stock }}</text>
				<view class="stock-tag">{{ info.goods_category_name }}</view>
			</view>
			<view class="num-box">
				<view class="num">
					<image src="/static/image/detail-002.png" mode=""></image>
					<text class="label">库存</text>
					<text class="num-text">{{ info.stock }}份</text>
				</view>
			</view>
		</view>
		<view class="content">
			<view class="desc">
				<view class="title">作品描述</view>
				<view class="desc-text" v-html="info.desc"></view>
			</view>

			<view class="auth">
				<view class="auth-item">
					<text>发行时间</text>
					<text>{{ info.start_time }}</text>
				</view>
				<view class="auth-item">
					<text>铸造方</text>
					<text>{{ info.network_name }}</text>
				</view>
				<!-- <view class="auth-item">
					<text>品牌方</text>
					<text>{{ info.issuer }}</text>
				</view> -->
				<view class="auth-item">
					<text>创作者</text>
					<text>{{ info.author_name }}</text>
				</view>
				<view class="auth-item">
					<text>藏品分类</text>
					<text>{{ info.goods_category_name }}</text>
				</view>
			</view>

			<view class="warn">
				<view class="warn-title">风险提示：</view>
				<view class="warn-text">
					数字藏品为虚拟商品，而非实物，仅限于经实名认证为年满18周岁的中国大陆用户购买。数字藏品的版权由发行方或原创者拥有，除另外取得版权拥有者书面同意外，用户不得将数字藏品用于任何商业用途。本商品一经出售，不支持退换。请勿对数字藏品进行炒作、场外交易，欺诈，或以任何其他非法方式进行使用。
				</view>
			</view>
		</view>

		<view class="footer">
			<view class="footer-left">
				<text>总金额</text>
				<text>￥{{ info.price }}</text>
			</view>
			<view class="footer-right">
				<view class="buy">
					<text v-if="info.status == 1&&info.gou_num">剩余优先购{{info.gou_num}}次</text>
					<button style="margin-left: 20rpx;" class="buy" :disabled="btnDisabled" @click="toBuy()" v-if="info.status == 1">购买</button>
				</view>

				<view class="itemTips radius-40 plr-60 ptb-15" v-if="info.status == 2">
					{{ info.status_text }}
				</view>

				<view class="button" v-if="info.status == 3">
					<view class="">
						{{ info.status_text }}
					</view>
					<view class="">
						{{ info.status_time_text }}
					</view>
				</view>

				<view class="itemTips radius-40 plr-60 text-center ptb-15" v-if="info.status == 4">
					<view class="">
						{{ info.status_text }}
					</view>
					<u-count-down :timestamp="info.diff_time" bg-color="background:transparent" color="#FFF"
						font-size="24" separator-color="#FFF" style="margin-left: 5rpx" @end="endTime"></u-count-down>
				</view>
			</view>
		</view>
	</view>
</template>





<script>
	import copyright from '@/components/Copyright.vue'
	export default {
		components: {
			copyright
		},
		data() {
			return {
				btnDisabled: false,
				id: '',
				info: {},
				walletAccount: 0,
				shareShow: false, //
				shareList: [
					// {
					// 	name: '微信',
					// 	image: '/static/mine/wx.png',
					// 	type: 1
					// },
					// {
					// 	name: '朋友圈',
					// 	image: '/static/mine/Circle.png',
					// 	type: 2
					// },
					{
						name: '保存海报',
						image: '/static/mine/poster.png',
						type: 3
					}
				],
				shareMessage: {},
				isShow: false, //
			}
		},
		onLoad(options) {
			this.id = options.id
		},
		onShow() {
			this.getDetails()
			// this.getfenXiang()
		},
		onPageScroll({
			scrollTop
		}) {
			if (scrollTop > 100) {
				this.isShow = true
			}
		},
		onPullDownRefresh() {
			this.isShow = true
			uni.stopPullDownRefresh()
		},
		methods: {
			nextStep() {
				uni.switchTab({
					url: '/pages/my/index'
				})
			},
			endTime() {
				this.getDetails()
			},
			changShare() {
				this.shareShow = true
				this.creatPoster()
			},
			getfenXiang() {
				this.$http('api/Newapi/fenXiang').then(res => {
					this.shareMessage = res;
				})
			},
			//获取详情
			getDetails() {
				this.$http('api/goods/goodsDetail', {
					id: this.id,
				}).then(res => {
					this.info = res
					this.getAccount()
				})
			},
			share(type) {
				if (type != 3) {
					uni.share({
						provider: "weixin",
						scene: type == 1 ? "WXSceneSession" : 'WXSceneTimeline',
						type: 1,
						summary: this.shareMessage.register_url,
						success: function(res) {
							console.log("success:" + JSON.stringify(res));
						},
						fail: function(err) {
							console.log("fail:" + JSON.stringify(err));
						}
					});
				} else {
					uni.showLoading({
						title: '图片保存中'
					})
					let ratio = 750 / uni.getSystemInfoSync().windowWidth
					uni.canvasToTempFilePath({
							x: 0,
							y: 0,
							canvasId: 'myCanvas',
							width: 345,
							height: 530,
							quality: 1,
							success: (res) => {
								//保存图片至相册
								// #ifndef H5
								// 除了h5以外的其他端
								uni.saveImageToPhotosAlbum({
									filePath: res.tempFilePath,
									success(res) {
										this.flag = true
										uni.hideLoading()
										uni.showToast({
											title: '图片保存成功，可以去分享啦~',
											duration: 2000,
											icon: 'none'
										})
									},
									fail() {
										uni.showToast({
											title: '保存失败，稍后再试',
											duration: 2000,
											icon: 'none'
										})
										uni.hideLoading()
									}
								})
								// #endif

								// #ifdef H5
								// h5的时候
								uni.showToast({
									title: '请长按保存',
									duration: 3000,
									icon: 'none'
								})
								// #endif
							},
							fail(res) {
								uni.showToast({
									title: '保存失败，稍后再试',
									duration: 2000,
									icon: 'none'
								})
								uni.hideLoading()
							}
						},
						this
					)
				}
				this.shareShow = false
			},
			gorecharge() {
				uni.navigateTo({
					url: '/pages/my/recharge'
				})
			},
			//获取余额
			getAccount() {
				this.$http('api/account/account').then(res => {
					this.walletAccount = res.account;
				}).catch(err => {
					console.log(err);
				})
			},
			handleBack() {
				if (getCurrentPages().length === 1) {
					uni.switchTab({
						url: '/pages/index',
					})
				} else {
					uni.navigateBack()
				}
			},
			async creatPoster() {
				let ratio = 750 / uni.getSystemInfoSync().windowWidth
				uni.showLoading({
					title: '海报生成中'
				})
				var ctx = uni.createCanvasContext('myCanvas')
				ctx.crossOrigin = "anonymous";
				ctx.clearRect(0, 0, 690 / ratio, 1060 / ratio) //清空之前的海报

				ctx.draw() //清空之前的海报


				await this.drawSquarePic(ctx, 0, 0, 690 / ratio, 1060 / ratio, 10 / ratio, '', '#15151C');

				await this.drawSquarePic(ctx, 0 / ratio, 0 / ratio, 690 / ratio, 690 / ratio, 0 / ratio, this.info
					.images);

				await this.drawTextReturnH(ctx, this.info.name + '来袭，数字藏品', 40 / ratio, 760 / ratio, 690 / ratio, 36 /
					ratio, '#FFFFFF', '', 1, 2)
				await this.drawTextReturnH(ctx, '发现一款超赞的数字藏品，快来看看', 40 / ratio, 820 / ratio, 690 / ratio, 30 / ratio,
					'#C2C2C2', '', 1, 2)
				await this.drawSquarePic(ctx, 40 / ratio, 860 / ratio, 600 / ratio, 150 / ratio, 30 / ratio, '',
					'#1D1E22');

				await this.drawTextReturnH(ctx, '闪鸟数字藏品', 70 / ratio, 930 / ratio, 690 / ratio, 36 / ratio, '#FFFFFF',
					'', 1, 2)
				await this.drawTextReturnH(ctx, '扫码打开闪鸟AP，发现更多', 70 / ratio, 970 / ratio, 690 / ratio, 26 / ratio,
					'#C2C2C2', '', 1, 2)
				await this.drawSquarePic(ctx, 490 / ratio, 873 / ratio, 124 / ratio, 124 / ratio, 0, this.shareMessage
					.qr_code_image);



				// await this.drawTextReturnH(ctx, '邀请码：' + this.info.uuid, 170 / ratio, 750 / ratio, 240 / ratio, 30 / ratio,
				// 	'#37DC6D', '', 1, 2)

				uni.hideLoading()
			},
			toBuy() {
				this.btnDisabled = true
				this.$http('api/orders/goodsApply', {
					id: this.id,
				}).then(res => {
					this.btnDisabled = false
					uni.navigateTo({
						url: '/pages/pay/collectPay?order_id=' + res.order_id,
					})
				}).catch((err) => {
					this.btnDisabled = false
					// console.log(err);
				})
			},
			// 复制
			copyAddress(val) {
				// #ifdef APP-PLUS
				uni.setClipboardData({
					data: val,
					success: function() {
						uni.hideToast()
						uni.getClipboardData({
							success: function(res) {
								uni.showToast({
									title: '复制成功',
									icon: 'none',
								})
							},
						})
					},
				})
				// #endif
				// #ifdef H5
				let that = this
				this.$copyText(val).then(
					function(e) {
						uni.showToast({
							title: '复制成功!',
							icon: 'none',
						})
					},
					function(e) {
						uni.showToast({
							title: '复制失败!',
							icon: 'none',
						})
					}
				)
				// #endif
			},
			drawSquarePic(ctx, x, y, w, h, r, url, color) {
				ctx.save()
				ctx.beginPath()
				// 绘制左上角圆弧
				ctx.arc(x + r, y + r, r, Math.PI, Math.PI * 1.5)
				// 绘制border-top
				// 画一条线 x终点、y终点
				ctx.lineTo(x + w - r, y)
				// 绘制右上角圆弧
				ctx.arc(x + w - r, y + r, r, Math.PI * 1.5, Math.PI * 2)
				// 绘制border-right
				ctx.lineTo(x + w, y + h - r)
				// 绘制右下角圆弧
				ctx.arc(x + w - r, y + h - r, r, 0, Math.PI * 0.5)
				// 绘制左下角圆弧
				ctx.arc(x + r, y + h - r, r, Math.PI * 0.5, Math.PI)
				// 绘制border-left
				ctx.lineTo(x, y + r)
				// 填充颜色(需要可以自行修改)
				ctx.setFillStyle(color)
				ctx.fill()
				// 剪切，剪切之后的绘画绘制剪切区域内进行，需要save与restore 这个很重要 不然没办法保存
				ctx.clip()
				// 绘制图片
				return new Promise((resolve, reject) => {
					if (url) {
						uni.getImageInfo({
							src: url,
							success(res) {
								ctx.drawImage(url, x, y, w, h)
								ctx.restore() //恢复之前被切割的canvas，否则切割之外的就没办法用
								ctx.draw(true)
								resolve()
							},
							fail(res) {
								uni.showToast({
									title: '请检查网络',
									duration: 2000,
									icon: 'none'
								})
							}
						})
					} else {
						ctx.restore() //恢复之前被切割的canvas，否则切割之外的就没办法用
						ctx.draw(true)
						resolve()
					}
				})
			},
			drawTextReturnH(
				ctx,
				text,
				x,
				y,
				maxWidth = 200,
				fontSize = 14,
				color = '#333333',
				lineHeight = 1,
				textAlign = 'left',
				index
			) {
				let arrText = text.split('')
				let line = ''

				ctx.font = index == 0 ? 'normal bold ' + fontSize + 'px PingFang SC' : fontSize +
					'px PingFang SC' //设置字体大小，注意：百度小程序 用ctx.setFontSize设置字体大小后，计算字体宽度会无效
				ctx.setFillStyle(color) //设置字体颜色
				var chr = text.split(""); //这个方法是将一个字符串分割成字符串数组
				var temp = "";
				var row = [];
				for (var a = 0; a < chr.length; a++) {
					if (ctx.measureText(temp).width < maxWidth) {
						temp += chr[a];
					} else {
						a--; //这里添加了a-- 是为了防止字符丢失，效果图中有对比
						row.push(temp);
						temp = "";
					}
				}
				row.push(temp);
				if (row.length == 1) {

					ctx.fillText(index == 1 ? text.substring(0, 4) + (text.length > 4 ? '...' : '') : text, x, y)

				} else {

					ctx.fillText(index == 1 ? row[0].substring(0, 4) + (row[0].length > 4 ? '...' : '') : row[0], x, y);
				}
				ctx.draw(true)
				// ctx.draw(
				// 	true) //本次绘制是否接着上一次绘制。即 reserve 参数为 false，则在本次调用绘制之前 native 层会先清空画布再继续绘制；若 reserve 参数为 true，则保留当前画布上的内容，本次调用 drawCanvas 绘制的内容覆盖在上面，默认 false。
				// return y
			},
		},
	}
</script>

<style lang="scss" scoped>
	.buy{
		    display: flex;
		    justify-content: center;
		    align-items: center;
	}
	.detail {
		width: 100%;
		min-height: calc(100vh - calc(44px + env(safe-area-inset-top)));
		background: RGBA(21, 21, 32, 1);
		box-sizing: border-box;
		padding-bottom: 253rpx;
	}

	.header {
		width: 100%;

		.header-image {
			width: 100%;
			height: 100vw;
		}
	}

	.name-num {
		padding: 8rpx 30rpx 38rpx;
		border-bottom: 6rpx solid #222433;

		.name {
			margin-top: 30rpx;
			display: flex;

			text {
				font-size: 28rpx;
				color: #FFFFFF;
			}
		}

		.stock {
			margin-top: 30rpx;
			display: flex;

			text {
				font-size: 22rpx;
				color: #FFFFFF;
			}

			.stock-tag {
				margin-left: 15rpx;
				padding: 0 10rpx;
				height: 34rpx;
				background: rgba(210, 150, 246, 0.61);
				border-radius: 6rpx;
				font-size: 22rpx;
				color: #FFFFFF;
			}
		}

		.num-box {
			display: flex;
			margin-top: 24rpx;

			.num {
				display: flex;
				position: relative;

				image {
					width: 167rpx;
					height: 37rpx;
				}

				.label {
					position: absolute;
					width: 60rpx;
					text-align: center;
					line-height: 37rpx;
					font-size: 18rpx;
					color: #FFFFFF;
				}

				.num-text {
					position: absolute;
					left: 60rpx;
					width: 107rpx;
					line-height: 37rpx;
					text-align: center;
					font-size: 18rpx;
					color: #FFFFFF;
				}
			}
		}
	}

	.content {
		padding: 0 30rpx;

		.desc {
			padding: 38rpx 0 47rpx;

			.title {
				font-size: 32rpx;
				color: #FFFFFF;
			}

			.desc-text {
				margin-top: 24rpx;
				font-size: 24rpx;
				color: #A8ABB8;
				line-height: 30rpx;
			}
		}

		.auth {
			background: #222433;
			border-radius: 10px;
			padding: 10rpx 25rpx;

			.auth-item {
				display: flex;
				justify-content: space-between;
				align-items: center;
				height: 52rpx;

				text {
					font-size: 24rpx;
					color: #A8ABB8;
				}
			}
		}

		.warn {
			margin-top: 40rpx;
			background: #222433;
			border-radius: 10px;
			padding: 30rpx 20rpx;

			.warn-title {
				font-size: 28rpx;
				color: #A8ABB8;
			}

			.warn-text {
				margin-top: 28rpx;
				font-size: 24rpx;
				color: #A8ABB8;
				line-height: 38rpx;
			}
		}
	}

	.footer {
		width: 100%;
		height: 147rpx;
		padding: 0 35rpx;
		background: RGBA(21, 21, 32, 1);
		display: flex;
		align-items: center;
		justify-content: space-between;
		border-top: 2rpx solid rgba(34, 36, 51, 1);
		position: fixed;
		bottom: 0;
		left: 0;

		.footer-left {
			display: flex;
			flex-direction: column;
			align-items: center;

			text:first-child {
				font-size: 24rpx;
				color: #535770;
			}

			text:last-child {
				font-size: 40rpx;
				font-weight: bold;
				color: #FFFFFF;
			}
		}

		.footer-right {
			color: #FFFFFF;

			button {
				min-width: 233rpx;
				height: 90rpx;
				line-height: 90rpx;
				background: linear-gradient(90deg, RGBA(204, 121, 239, 1), RGBA(143, 38, 235, 1));
				border-radius: 45rpx;
				border: none;
				font-size: 32rpx;
				color: #FFFFFF;
			}
		}
	}
</style>
